<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>与后端交互的前端示例</title>
<script>
// 函数：向后端发送GET请求
function fetchData() {
  fetch('https://your-backend-endpoint.com/data') // 替换为后端API的URL
    .then(response => {
      if (!response.ok) {
        throw new Error(`网络响应错误：${response.statusText}`);
      }
      return response.json(); // 解析JSON格式的响应体
    })
    .then(data => {
      // 处理获取到的数据
      console.log('获取到的数据：', data);
      // 这里可以更新页面上的元素，例如：
      // document.getElementById('data-element').textContent = data.someField;
    })
    .catch(error => {
      // 处理错误情况
      console.error('发生错误：', error);
    });
}
</script>
</head>
<body>

<button onclick="fetchData()">获取后端数据</button>

<!-- 这里可以添加其他HTML元素来显示获取到的数据 -->

</body>
</html>